<template>
      <common-edit-dialog title="编辑" :visible.sync="dialogShow" @cancel="close" @submit="submitForm">
        <div class="transfer-box">
            <el-transfer v-model="value" :data="columnList" :titles="['源列表','目标列表']" :button-texts="['加入右侧','加入左侧']"></el-transfer>
        </div>
        </common-edit-dialog>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
  },
  data() {
    return {

      columnList: [
        {key: 'b', label: '厂商码'},
        {key: 'c', label: '告警码'},
        {key: 'd', label: '告警类型'},
        {key: 'e', label: '告警级别'},
        {key: 'f', label: '源IP'},
        {key: 'g', label: '规则名称'},
        {key: 'h', label: '告警时间'},
        {key: 'i', label: '目标IP'},
        {key: 'j', label: '描述'},
        {key: 'k', label: '状态'}
      ],
        value: [],
        dialogShow: false,
    };
  },
// 方法
  methods: {
      /**
       * 关闭
       */
      close(){
          this.dialogShow = false;
      },
      /**
       * 显示
       */
      show(data){
          this.value = data;
          this.dialogShow = true;
      },
      /**
       * 提交
       */
      submitForm(){
        this.dialogShow = false;
          this.$emit("checked", this.value)
      }
  },
// 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
// 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
    .transfer-box{text-align: center;
        ::v-deep{
            .el-transfer{height: 50vh;
                .el-transfer-panel{height: 100%;width: 260px;
                    .el-transfer-panel__header{
                        .el-checkbox{text-align: left;}
                    }
                    .el-transfer-panel__body{height: 100%;
                        .el-checkbox-group{height: 100%;
                            .el-checkbox{text-align: left;}
                        }
                    }
                }
                .el-transfer__buttons{width: 180px;
                    .el-button{margin-left: 0;
                        span{margin-left: 0;}
                    }
                }
            }
        }
    }
</style>
